<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.aaa {
				transition: 1s allow-discrete;
				outline: 1px solid red;
				height: 500px;
				@starting-style {
					height: 0px;
				}
			}
			/* @starting-style {
				.aaa{
					height: 0px;
				}
			} */
			.aaa-hide{
				display: none;
				height: 0px;
			}
			
			
		</style>
	</head>
	<body>
		<button onclick="showImg2()">img2 toggle</button>
		<div class="aaa">
			<p>1111111111</p>
			<p>1111111111</p>
			<p>1111111111</p>
			<p>1111111111</p>
		</div>
	</body>
</html>
<script>

	function showImg2() {
		let e = document.querySelector('.aaa');
		if( ![...e.classList].includes('aaa-hide') ) {
			e.classList.add('aaa-hide');
		} else {
			e.classList.remove('aaa-hide');
		}

	}
</script>
